<template>
	<div class="doc-opt-bar" :class="!isMediaFile && !showComponent ? 'doc' : ''">
		<div class="input-moni" v-if="isMediaFile || showComponent">
			<div class="input-area-moni fc-999" @click="showDiscuss">谈谈你的感受...</div>
			<div class="btn-moni" @click="showAppraise">评分</div>
		</div>
		<div class="icon-msg icon-opt" v-if="!(isMediaFile || showComponent) && fileInfo.isAllowTopic == 1"
			@click="showCompt">
			<van-icon  size="18" name="comment-o" />
		</div>
		<div class="icon-star icon-opt" @click="opt(1)">
			<van-icon size="18" :name="fileInfo.isCollect == 1 ? 'star' : 'star-o'" />
		</div>
		<div class="icon-agree icon-opt" @click="opt(2)">
			<van-icon size="18" :name="fileInfo.isPraise == 1 ? 'good-job' : 'good-job-o'" />
		</div>
		<div class="icon-download icon-opt" @click="opt(3)"  v-if="fileInfo.downloadUrl">
			<a  v-if="fileInfo.type!='M'" :href="downloadUrl" download>
            <van-icon size="18" name="back-top" />
			</a>
			 <van-icon v-else size="18" name="back-top" />
        </div>
	</div>
</template>

<script>
	import vanIcon from '@/components/vant/van-icon/van-icon.vue'
	export default {
		components: {
			vanIcon
		},
		props: {
			isMediaFile: {
				type: Boolean,
				default: false
			},
			showComponent: {
				type: Boolean,
				default: false
			},
			fileInfo: {
				type: Object,
				default: () => {}
			},
			docConfigInfo: {
				type: Object,
				default: () => {}
			},
			type: {
				type: [String, Number],
				default: ''
			},
			downloadUrl:{
				type:String,
				default:"downloadUrl"
			}
		},
		mounted() {
		console.log({
			fileInfo:this.fileInfo
		})	
		},
		methods: {
			opt(type) {
				this.$emit('opt', type)
			},
			showAppraise() {
				this.$emit('showAppraise')
			},
			showCompt() {
				this.$emit('showComponent')
			},
			showDiscuss() {
				this.$emit('showDiscuss')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.doc-opt-bar {
		position: fixed;
		padding: 15px 15px 20px 15px;
		bottom: 0;
		width: 100%;
		background: #fff;
		display: flex;
		align-items: center;
		box-shadow: 0px 1px 0px 0px #EEEEEE;

		&.doc {
			justify-content: space-around;
		}

		.input-moni {
			display: flex;
			font-size: 14px;
			width: 77%;

			.input-area-moni {
				text-align: center;
				padding-top: 10px;
				width: 72.5563%;
				height: 40px;
				background-image: url(@/static/image/input-area-moni.png);
				background-size: 100% 100%;
			}

			.btn-moni {
				text-align: center;
				padding-top: 10px;
				width: 27.44%;
				height: 40px;
				background: var(--color);
				color: #fff;
				border-radius: 0 20px 20px 0;
				position: relative;
				clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 10px 0);
			}
		}
	}

	.icon-agree {
		margin-left: 5.87%;
	}

	.icon-star {
		margin-left: 3.73%;
	}
.icon-download{
	    transform: rotate(180deg);
		margin-left: 3.73%;
		display: flex;
		position: relative;
		top:2px;
}
	/*.icon-msg {
      width: 22px;
      height: 22px;
      background: url(@/static/image/icon-msg.png) no-repeat 100%/cover;

    }*/
</style>